svg

var width=500;

var height=200;

var svg=d3.select("#chart")

.append("svg")

.attr('width', width)

.attr('height', heigt);

D3로 시각화를 하기 위해서 HTML5에 svg 객체가 필요하다.

위는 높이 200, 너비 500의 SVG 객체

사용할 데이터 정의

var dataset=[5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25];

Scale

입력 데이터를 막대 차트로 출력하기 위해 스케일(scale) 객체를 정의해 주어야 한다.

- domain

- range

var padding=20;

var y=d3.scale.linear()

.domain([0, d3.max(dataset)])

.range([height-paddding, 0])

var x=d3.scale.linear()

.domain([0, dataset.length])

.range([padding, width])

bar chart(막대 그래프)

scale 객체를 이용해 데이터를 막대 그래프로 변환

rect 객체는 차트에 막대를 추가

text 객체는 막대차트 위에 데이터값 추가

svg.selectAll('rect')

.data(dataset)

.enter()

.append('rect')

.attr('x', function(d, i){ return x(i); })

.attr('y', function(d){ return y(d); })

.attr('width', function(d, i){

return parseInt(( width-padding )/dataset.length)-1;

})

.attr('height', function(d){

return height-y(d)-padding;

})

.attr('fill', 'blue');

svg.selectAll('text')

.data(dataset)

.enter()

.append('text')

.text(function(d){ return d; })

.attr('x', function(d, i){

return parseInt(x(i))+1;

})

.attr('y', function(d){

return y(d)+10;

})

.attr('font-size', '10px')

.attr('fill',' white');

축 설정

var xAxis=d3.svg.axis()

.scale(x)

.orient('bottom');

var yAxis=d3.svg.axis()

.scale(y)

.ticks(5)

.orient('left');

svg.append('g')

.attr('class', 'axis')

.attr('transform', "translate(0, "+(height-padding)+")")

.call(xAxis);

svg.append('g')

.attr('class', 'axis')

.attr('transform', "translate("+padding+", 0)")

.call(yAxis);

전체 HTML

<!DOCTYPE html>

<style>

.axis path,

.axis line{

fill: none;

stroke: black;

shape-rendering: crispEdges;

}

.axis text{

font-family: sans-serif;

font-size: 11px;

}

</style>

var width=500;

var height=200;

var svg=d3.select("#chart")

.append("svg")

.attr('width', width)

.attr('height', height)

var dataset=[5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25];

var padding=20;

var y=d3.scale.linear()

.domain([0, d3.max(dataset)])

.range([height-padding, 0])

var x=d3.scale.linear()

.domain([0, dataset.length])

.range([padding, width])

svg.selectAll('rect')

.data(dataset)

.enter()

.append('rect')

.attr('x', function(d, i){ return x(i); })

.attr('x', function(d){ return y(d); })

.attr('width', function(d, i){

return parseInt((width-padding)/datset.length)-1;

})

.attr('height', function(d){

return height-y(d)-padding;

})

.attr('fill', 'blue');

svg.selectAll('text')

.data(dataset)

.enter()

.append('text')

.text(function(d){ return d; })

.attr('x', function(d, i){

return parseInt(x(i))+1;

})

.attr('y', function(d){

return y(d)+10;

})

.attr('font-size', '10px')

.attr('fill', 'white');

var xAxis=d3.svg.axis()

.scale(x)

.orient('bottom');

var yAxis=d3.svg.axs()

.scale(y)

.ticks(5)

.orient('left');

svg.append('g')

.attr('class', 'axis')

.attr('transform', "translate(0, "+(height-padding)+")")

.call(xAxis);

svg.append('g')

.attr('class', 'axis')

.attr('tranform', "translate("+padding+", 0)")

.call(yAxis);

</script>

위에서 구현한 html 브라우저로 사용

<!DOCTYPE html>

<html>

<head>

<title>D3.js BAR CHART</title>

<style>

.axis path,

.axis line{

fill:none;

stroke: black;

shape-rendering: crispEdges;

}

.axis text{

font-family: snas-serif;

font-size: 11px;

}

</style>

</head>

<body>

var width=500;

var height=200;

var svg=d3.select("#chart")

.append("svg")

.attr('width', width)

.attr('height', height);

var dataset=[5, 10, 13, 19, 21 , 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25];

var padding=20;

var y=d3.scale.linear()

.domain([0, d3.max(dataset)])

.range([height-padding, 0])

var x=d3.scale.linear()

.domain([0, dataset.length])

.range([padding, width])

svg.selectAll('rect')

.data(dataset)

.enter()

.append('rect')

.attr('x', function(d, i){

return x(i);

})

.attr('y', function(d){

return y(d);

})

.attr('width', function(d, i){

return parseInt((width-padding)/dataset.length)-1;

})

.attr('height', function(d){

return height-y(d)-padding;

})

.attr('fill', 'blue');

svg.selectAll('text')

.data(dataset)

.enter()

.append('text')

.text(function(d){

return d;

})

.attr('x', function(d, i){

return parseInt(x(i))+1;

})

.attr('y', function(d){

return y(d)+10;

})

.attr('font-size', '10px')

.attr('fill', 'white')

var xAxis=d3.svg.axis()

.scale(x)

.orient('bottom')

var yAxis=d3.svg.axis()

.scale(y)

.ticks(5)

.orient('left')

svg.append('g')

.attr('class', 'axis')

.attr('transform', "translate(0, "+ (height-padding)+")")

.call(xAxis)

svg.append('g')

.attr('class', 'axis')

.attr('tranform', "translate("+padding+", 0)")

.call(yAxis)

</script>

</body>

</html>

Bar Chart